<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时后才可点击的按钮</title>
</head>

<body>
    <button id="buttonA">按钮 A</button>
    <button id="buttonB" style="display: none;" class="btn-submit">按钮 B</button>
    <span id="countdown"></span>
    <script>
        let showButtonB = false;
        let disableButtonB = true;
        let countdown = 5;
        let intervalId = null;

        const handleClickButtonA = () => {
            showButtonB = true;
            disableButtonB = true;
            countdown = 5;

            updateUI();

            // 开始倒计时
            intervalId = setInterval(() => {
                countdown--;
                if (countdown === 0) {
                    disableButtonB = false;
                    clearInterval(intervalId);
                    updateUI();
                }
                updateUI();
            }, 1000);
        };

        const handleClickButtonB = () => {
            // 处理按钮 B 被点击后的逻辑
            console.log("按钮 B 被点击了");
        };

        const updateUI = () => {
            const buttonA = document.getElementById("buttonA");
            const buttonB = document.getElementById("buttonB");
            const countdownElem = document.getElementById("countdown");

            buttonB.style.display = showButtonB ? "inline-block" : "none";
            buttonB.disabled = disableButtonB;
            countdownElem.textContent = countdown.toString();
        };

        const buttonA = document.getElementById("buttonA");
        buttonA.addEventListener("click", handleClickButtonA);

        const buttonB = document.getElementById("buttonB");
        buttonB.addEventListener("click", handleClickButtonB);

    </script>

    <style>
        * {
            --B20: #f7f7f8;
            --red: #fd281a;
            --B80: #655e5e;
            --B100: #292525;
        }

        .btn-submit {
            font-weight: 500;
            width: 130px;
            height: 30px;
            border-radius: 30px;
            background: var(--B20);
            color: var(--red);
            margin: 0 10px;
            text-align: center;
        }

        .btn-submit:hover {
            background: var(--red);
            color: #fff;
            border-color: aliceblue;
        }


        .btn-submit:disabled {
            background: var(--B20);
            color: var(--B80);
        }
    </style>
</body>

</html>